<template>
  <div class="xyhs_header">
     <div class="logo"> 
        <img :src="'./images/logo@2x.png'"> 
    </div> 
    <div class="right"> 
      <div class="user_name"
           @click="handleUser" >
           <i class="iconfont user_icon">&#xe60a;</i> 
        <span>{{fullName}}</span>
      </div>
      <div class="logout" title="退出" @click="logout"><i class="iconfont">&#xe608;</i>退出</div> 
    </div>
  </div>
</template>

 

<script lang="ts"> 
import { commonStroe } from '@/stores/common'
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
 
export default defineComponent({
  name: 'Header',
  setup() {
     const stroe = commonStroe()
     const  router = useRouter()
     const fullName = sessionStorage.getItem('fullName')
    const logout = () => {
      sessionStorage.setItem('userId', '') 
      sessionStorage.setItem('oauthToken', '') 
      sessionStorage.setItem('fullName', '')  
       stroe.setLoginState(false)   
       router.push('/login')  
    }
    return {
      fullName,
      logout
    }
  },
})
</script>


<style lang="scss">
.xyhs_header {
  width: 100%;
  height: 64px;
  background: #1D84EF;
  padding-left: 16px;
  padding-right: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  position: relative;
  z-index: 9;
 .right {
    float: right; 
    display: flex;
    align-items: center
  }
  .logo { 
    background-size: 100% 100%;
    height: 38px; 
    img {
      height: 100%;
      image-rendering:-moz-crisp-edges;
      image-rendering:-o-crisp-edges;
      image-rendering:-webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -ms-interpolation-mode:nearest-neighbor; 
    }
  }
 .logout { 
  cursor: pointer; 
  margin-left: 26px;
  margin-top: -3px;
  font-size: 16px;
  i {
    padding: 0;  
    color: #fff;
    padding-right: 6px;
    vertical-align: top;
  }
}
.title {
  font-size: 24px;

}
.user_name {  
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  .user_icon {
    
    display: inline-block;
    vertical-align: middle; 
    text-align: center; 
    font-size: 26px;
    padding-left: 2px; 
  }
  span {
    padding: 0 8px;
    vertical-align: middle;
  }
  
}
}
</style>
